<template>
  <div class="page-404-vue error-page">
    <div class="background-image"></div>
    <p>您访问的页面出现错误~~</p>
    <router-link to="/">
      <el-button>返回首页</el-button>
    </router-link>
  </div>
</template>

<script>
export default {
  name: "error-page-500",
}
</script>

<style lang="scss" scoped>
.page-404-vue {
  .background-image {
    background-image: url(../../assets/error/500.png);
  }
}
.error-page {
  height: calc(100vh - 60px - 100px);
  text-align: center;
  .background-image {
    height: 35vh;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 18vh auto 50px;
  }
  p {
    font-size: 22px;
    color: #3788ee;
    margin-bottom: 5vh;
  }
}
</style>